<template>
    <div class="integral-order-wrapper">
      <div class="contentInfo top">
        <div class="orderTitle ">
          <div class="orderInfo">
            <p class="titleName">{{info.title}}</p>
            <p>所需积分：<span class="red-num">{{info.point}}</span></p>
            <p>兑换数量：<span class="red-num">{{info.count}}</span></p>
          </div>
        </div>
        <div class="surplus"><span>兑换后剩余积分</span><span class="red-num surplusNum">{{this.point - info.point}}</span></div>
      </div>
      <div class="addrText">
        请输入您的收货地址
      </div>
      <div class="blockB contentInfo baseInfo">
        <mt-field label="*收货人" ref="username" placeholder="请输入名字" @input="verify" v-model="addressInfo.username"></mt-field>
        <mt-field label="*联系电话" placeholder="请输入手机号码" type="tel" v-model="addressInfo.contactsPhone" @input="verify"></mt-field>
        <a href="javascript:;" class="mint-cell mint-field" @click="selectCity">
          <div class="mint-cell-left"></div>
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <span class="mint-cell-text">*区域地址</span>
            </div>
            <div class="mint-cell-value"  @input="verify">{{myAddress}}</div>
            <i class="icon right"></i>
          </div>
        </a>
        <mt-field label="*详细地址" placeholder="街道/楼号/门牌号等详细地址" v-model="addressInfo.address" @input="verify"></mt-field>
      </div>
      <div class="buttonBlock">
        <a href="javascript:;" class="button buttonNormal" @click="showPop" v-if="status">立即兑换</a>
        <a href="javascript:;" class="button buttonCancel" v-else>立即兑换</a>
      </div>
      <mt-popup
        v-model="popupVisible"
        popup-transition="popup-fade"
        position="bottom"
        >
        <div class="mtPop">
          <mt-picker ref="picker" :showToolbar=true width="100%" :slots="myAddressSlots" @change="onMyAddressChange">
            <div class="toolbar"><a href="javascript:;" @click="popupVisible=false">取消</a><a class="barRight" href="javascript:;" @click="confirm">确认</a></div>
          </mt-picker>
        </div>
      </mt-popup>
    </div>
</template>
<script>
  import { MessageBox} from 'mint-ui';
  import { mapGetters } from 'vuex'
  import myaddress from '../../../../common/utils/city.json';
  import api from '../../../../api';
  export default {
    name: 'integralOrder',
    components: {
    },
    data() {
      return {
        popupVisible: false,
        status: false,
        myAddressSlots: [
          {
            flex: 1,
            defaultIndex: 1,
            values: Object.keys(myaddress),
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: [],
            className: 'slot3',
            textAlign: 'center'
          },
          {
            divider: true,
            content: '-',
            className: 'slot4'
          },
          {
            flex: 1,
            values: [],
            className: 'slot5',
            textAlign: 'left'
          }
        ],
        myAddress: '请输入区域',
        myAddressProvince: '',
        myAddressCity: '',
        myAddresscounty: '',
        info: {},
        point: {},
        addressInfo: {},
      }
    },
    mounted(){
      api.vipinfo().then((res) => {
        if (res && res.data) {
          this.point = res.data.point || 0;
        }
      })
      this.getInfo();
    },
    computed: {
      ...mapGetters([
        'orderInfo',
      ])
    },
    methods: {
      getInfo(){
        if (Object.keys(this.orderInfo).length > 0) {
          this.info = this.orderInfo;
          localStorage.setItem('orderInfo', JSON.stringify(this.orderInfo))
        } else {
          this.info = JSON.parse(localStorage.getItem('orderInfo'))
        }
      },
      onMyAddressChange(picker, values) {
        if (myaddress[values[0]]){
          picker.setSlotValues(1, Object.keys(myaddress[values[0]])); // Object.keys()会返回一个数组，当前省的数组
          picker.setSlotValues(2, myaddress[values[0]][values[1]]); // 区/县数据就是一个数组
          this.myAddressProvince = values[0];
          this.myAddressCity = values[1];
          this.myAddresscounty = values[2];
        }
      },
      showPop(){
        let messageTemplate, showStatus;
        const regPhone = /^[1][3,4,5,7,8][0-9]{9}$/;
        const { contactsPhone } = this.addressInfo;
        if (!regPhone.test(contactsPhone)) {
          this.phoneError = '请输入正确的手机号';
          console.log(this.phoneError)
          return false;
        }
        api.exchange({code: this.$route.params.id, count: this.info.count, addressInfo: this.addressInfo}).then((res) => {
          if (res && res.data && res.data.code > 0) {
            showStatus = true
          }
          if (showStatus) {
            messageTemplate = `<div class="orderMessagebox">
                <div class="iconTop"><i class="icon check2"></i></div>
                <p>兑换成功</p>
                <p class="successSurplus">当前剩余积分：<span>3000</span></p>
              </div>`;
          } else {
            messageTemplate = `<div class="orderMessagebox">
                <div class="iconTop"><i class="icon eclat2"></i></div>
                <p class="messageText">兑换失败，您的积分不足</p>
              </div>`;
          }
          MessageBox({
            title: '',
            message: messageTemplate,
            showCancelButton: false,
            confirmButtonClass: 'orderMessageConfirm',
            confirmButtonHighlight: true
          }).then(() => {
            this.$router.push('/')
          })
        })
      },
      selectCity(){
        this.popupVisible = true;
        this.$nextTick(() => {
          this.myAddressSlots[0].defaultIndex = 0
        });
      },
      confirm(){
        this.popupVisible = false;
        this.myAddress = this.myAddressProvince + this.myAddressCity + this.myAddresscounty;
        this.addressInfo.location = this.myAddress;
        this.verify()
      },
      verify(){
        let {username, contactsPhone, location, address} = this.addressInfo;
        if (username && contactsPhone && location && address) {
          // 全部输入
          this.status = true;
        } else {
          this.status = false;
        }
      }
    }
  }
</script>
<style lang="postcss">
.mint-cell-wrapper{
  padding: 0 20px;
}
.mint-msgbox{
  border-radius:5px;
}
.mint-msgbox-btns{
  height: 45px;
  line-height: 45px;
}
.orderMessagebox{
  color:#333;
  font-size:15px;
  .iconTop{
    height: 34px;
    line-height:34px;
    i.icon{
      font-size: 34px;
      line-height: 34px;
      color:#FD5729;
    }
  }
  .messageText{
    margin:27px 0 20px 0;
  }
  .successSurplus{
    font-size:14px;
    span{
      color:#FD5729;
    }
  }
}
.orderMessageConfirm{
  font-size:14px;
  color:#FD5729;
  font-weight: bold;
  &:active{
    color:#FD5729;
  }
}
</style>
<style lang="postcss" scoped>
  
  .integral-order-wrapper {
    position: fixed;
    left:0;
    right: 0;
    top:0;
    height: 100%;
    width: 100%;
    font-size: 13px;
    background: #F6F6F6;
    color:#333;
    padding-top:10px;
    .icon{
      color:#959595;
    }
    .button{
      display: inline-block;
      width: 335px;
      height: 40px;
      border-radius:5px;
      box-size:border-box;
      text-align:center;
      line-height:40px;
      font-size:15px;
      color:#fff;
    }
    .mr30{
      margin-right: 30px;
    }
    .buttonCancel{
      background:#D8D8D8;
    }
    .buttonNormal{
      background:#FD5729;
    }
    .top{
      padding-left:20px;
    }
    .red-num{
      color:#FD5729;
    }
    .blockB{
      margin-bottom: 10px;

    }
    .border{
      width: 335px;
      height: 1px;
      background: #EEEEEE;
    }
    .contentInfo{
      background: #fff;

    }
    .orderTitle{
      height: 72px;
      padding:12px 0 4px 0;
      p{
        height: 18px;
        margin-bottom:5px;
      }
      .titleName{
        font-size:15px;
        height: 21px;
        margin-bottom:6px;
        padding-right:20px;
        overflow: hidden;
      }
    }
    .surplus{
      height: 45px;
      line-height: 45px;
      font-size: 14px;
      padding-right:20px;
      border-top:1px solid #eee;
      .surplusNum{
        float: right;
        font-size:15px;
      }
    }
    .buttonBlock{
      position: fixed;
      left:0;
      right: 0;
      bottom:0;
      height: 55px;
      background: #fff;
      text-align:center;
      line-height:55px;
    }
    .mtPop{
      width: 376px;
      background: #fff;
    }
    .addrText{
      height: 36px;
      line-height:36px;
      color:#AAA;
      padding-left:10px;
    }
    .toolbar{
      padding:0 20px;
      height: 40px;
      line-height:40px;
      a{
        font-size:14px;
        color:#aaa;
      }
      .barRight{
        float:right;
        color:#FD5729;
      }
    }
  }
</style>
